<template>
  <view class="login-container">
    <view class="login-box">
      <text class="login-title">用户登录</text>

      <!-- 用户账号输入框 -->
      <input v-model="userAccount" placeholder="请输入用户账号" class="login-input" />

      <!-- 密码输入框 -->
      <input v-model="password" placeholder="请输入密码" type="password" class="login-input" />

      <!-- 验证码输入框及图片 -->
      <view class="captcha-wrapper">
        <input v-model="captcha" placeholder="请输入验证码" class="login-input captcha-input" />
        <image :src="captchaUrl" class="captcha-img" @click="getCaptcha" />
      </view>

      <!-- 登录按钮 -->
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import AuthAPI from "@/api/auth";

// -------------------- 表单数据 --------------------
const userAccount = ref("admin");
const password = ref("123456");
const captcha = ref("");

// -------------------- 验证码相关 --------------------
const captchaId = ref(""); // 验证码ID
const captchaUrl = ref(""); // 验证码图片地址

// -------------------- Pinia 用户状态 --------------------
const userStore = useUserStore();

// -------------------- 获取验证码 --------------------
const getCaptcha = async () => {
  try {
    const res = await AuthAPI.getCaptcha();
    captchaId.value = res.captchaId || "";
    if (res.captchaImage) captchaUrl.value = res.captchaImage;
  } catch (err) {
    console.error("获取验证码失败:", err);
    uni.showToast({ title: "获取验证码失败", icon: "none" });
  }
};

// 页面加载时获取验证码
onMounted(() => {
  getCaptcha();
});

// -------------------- 登录处理 --------------------
const handleLogin = async () => {
  try {
    const loginResult = await AuthAPI.login(
      userAccount.value,
      password.value,
      captchaId.value,
      captcha.value,
    );

    // 如果成功，保存 token 和用户信息到 Pinia
    if (loginResult && loginResult.token) {
      userStore.setLoginState(loginResult);

      uni.showToast({ title: "登录成功", icon: "success" });

      // 跳转个人中心（tabBar 页面用 switchTab）
      uni.switchTab({ url: "/pages/my/index" });
    } else {
      // 未返回 token 的情况
      uni.showToast({ title: "登录失败，未返回Token", icon: "none" });
      getCaptcha(); // 刷新验证码
    }
  } catch (err) {
    console.error("登录失败:", err);
    uni.showToast({ title: "登录失败", icon: "none" });
    getCaptcha(); // 异常刷新验证码
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.login-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 90%;
  max-width: 400px;
  padding: 40px 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.login-title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.login-input {
  height: 44px;
  padding: 0 12px;
  font-size: 16px;
  color: #333;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.login-input:focus {
  background-color: #fff;
  border-color: #409eff;
}

.captcha-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-img {
  width: 100px;
  height: 44px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.login-btn {
  height: 48px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  background-color: #409eff;
  border: none;
  border-radius: 8px;
}

.login-btn:active {
  background-color: #3070c4;
}
</style>
